<template>
  <a-layout id="index-side" style="height: 100vh">
    <template v-if="!globalstate.ismobile">
      <a-layout-sider :trigger="null" collapsible v-model="globalstate.collapsed" breakpoint="md"
                      @breakpoint="onBreakpoint">
        <div class="ant-pro-sider-menu-logo">
          <a :target="initmenu.logoInfo.target" :href="initmenu.logoInfo.url"
             class="router-link-active">
            <div>
              <img alt="logo" class="logo" :src="initmenu.logoInfo.icon">
              <span style="margin-left: 24px">{{initmenu.logoInfo.name}}</span>
            </div>
          </a>
        </div>
        <lm-menu
            class="a-menu"
            mode="inline"
            theme="dark"
            :menu="initmenu.menuInfo"
            @click="opentab"></lm-menu>
      </a-layout-sider>
    </template>
    <template v-if="globalstate.ismobile">
      <a-drawer
          width="200"
          placement="left"
          :closable="false"
          :get-container="false"
          :visible="globalstate.collapsed" @close="() => (globalstate.collapsed = false)"
          :mask-closable="true" :wrap-style="{ position: 'absolute' }">
        <a-layout-sider :trigger="null" :collapsed="false" breakpoint="md"
                        @breakpoint="onBreakpoint" style="height: 100%;">
          <div class="ant-pro-sider-menu-logo">
            <a :target="initmenu.logoInfo.target" :href="initmenu.logoInfo.url"
               class="router-link-active">
              <div>
                <img alt="logo" class="logo" :src="initmenu.logoInfo.icon">
                <span style="margin-left: 24px">{{initmenu.logoInfo.name}}</span>
              </div>
            </a>
          </div>
          <lm-menu
              class="a-menu"
              mode="inline"
              theme="dark"
              :menu="initmenu.menuInfo"
              @click="opentab"></lm-menu>
        </a-layout-sider>
      </a-drawer>
    </template>
    <a-layout>
      <a-layout-header style="background: #fff;padding:0 10px;height: 48px;line-height: 48px;">
        <div style="display: inline-block"
             @click="() => (globalstate.collapsed = !globalstate.collapsed)">
          <icon-font class="index-side-trigger"
                     :type="globalstate.collapsed ? 'lm-zhankai' : 'lm-shousuo'"
          ></icon-font>
        </div>
        <div style="float: right">
          <a-dropdown placement="bottomRight" style="margin-left: 20px">
            <a-badge dot style="font-size: 20px;vertical-align: middle;text-align: center;">
              <a-icon type="calendar"></a-icon>
            </a-badge>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;">个人信息</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;">修改密码</a>
              </a-menu-item>
              <a-menu-divider></a-menu-divider>
              <a-menu-item>
                <a href="javascript:;">退出登录</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
          <a-dropdown placement="bottomRight" style="margin-left: 20px">
            <a-badge dot style="font-size: 20px;vertical-align: middle;text-align: center;">
              <a-icon type="bell"></a-icon>
            </a-badge>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;">个人信息</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;">修改密码</a>
              </a-menu-item>
              <a-menu-divider></a-menu-divider>
              <a-menu-item>
                <a href="javascript:;">退出登录</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
          <a-dropdown placement="bottomRight" style="margin-left: 20px;">
            <a-avatar :size="36"
                      style="color: #f56a00; backgroundColor: #fde3cf;margin-top: -4px;">
              U
            </a-avatar>
            <a-menu slot="overlay">
              <a-menu-item @click="personalarchives">
                <a-icon type="idcard"></a-icon>
                <span>个人档案</span>
              </a-menu-item>
              <a-menu-item @click="personalsetting">
                <a-icon type="user"></a-icon>
                <span>个人设置</span>
              </a-menu-item>
              <a-menu-divider></a-menu-divider>
              <a-menu-item @click="loginout">
                <a-icon type="export"></a-icon>
                <span>退出登录</span>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </a-layout-header>
      <a-layout-content>
        <a-tabs v-model="activeKey" size='small' :tab-bar-gutter='0' hide-add
                type="editable-card"
                @edit="onTabEvent">
          <a-tab-pane class="ant-tabs-tab-pane_height" v-for="pane in panes" :key="pane.key"
                      :tab="pane.title" :closable="pane.closable">
            <iframe style="border:unset;height: 100%;width: 100%"
                    :src="pane.key"></iframe>
          </a-tab-pane>
        </a-tabs>
      </a-layout-content>
      <a-layout-footer
          style="text-align: center;text-align: center;height: 30px;line-height: 30px;padding: unset;font-size: 6px">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>

export default {
  name: "Index",
  data(){
    return {
      //全局数据
      globaldata: {
        //控件国际化

        //控件大小
        elsize: "small",
      },
      //全局状态
      globalstate: {
        //菜单是否展开
        collapsed: false,
        //数据正在刷新
        isrefresh: false,
        //
        ismobile: false
      },
      panes: [],
      initmenu: {
        homeInfo: {
          name: "工作台",
          url: "home.html"
        },
        logoInfo: {
          name: "",
          icon: "image/logo.svg",
          url: "",
          target: "_self"
        },
        menuInfo: []
      },
      activeKey: '',
    }
  },
  created() {
    //配置首页
    // if (this.initmenu.homeInfo) {
    //   this.panes.push({
    //     title: this.initmenu.homeInfo.name,
    //     key: this.initmenu.homeInfo.url,
    //     closable: false,
    //   })
    //   this.activeKey = this.initmenu.homeInfo.url;
    // }
    // this.getmenu(() => {
    //   var tabs = location.hash.replace(/#/, '');
    //   if (tabs === null || tabs === undefined || tabs === '') return false;
    //   var tabjson = JSON.parse(lmbase64_de(tabs));
    //   var tabId = tabjson['key'];
    //   var hasitem = false;
    //   $.each(this.panes, (index, item) => {
    //     if (item.key == tabId) {
    //       location.hash = lmbase64_en(JSON.stringify(item));
    //       hasitem = true;
    //       return false;
    //     }
    //   })
    //   if (!hasitem) {
    //     this.panes.push(tabjson);
    //   }
    //   this.activeKey = tabId;
    // });
    console.log('this.utils.myutils')
    console.log(this.tlojest())


    //test();
  },
  methods: {
    // getmenu(callback) {
    //   this.utils.myutils.request.post({
    //     url: "https://oa.limiaokeji.com/erp/menu/getmenu",
    //     data: {
    //       token: lmgettoken(),
    //       uid: lmbase64_en(lmgetuid()),
    //       istree: 1
    //     },
    //     su: (su) => {
    //       this.initmenu["menuInfo"] = myutils.arrtoTree(su.result);
    //       console.log(this.initmenu)
    //       if (callback)
    //         callback();
    //     },
    //     ex: (ex) => {
    //
    //     }
    //   })
    // },
    // onCollapse(collapsed, type) {
    //   console.log(collapsed, type);
    // },
    // onBreakpoint(broken) {
    //   console.log(broken);
    //   this.globalstate.ismobile = broken;
    // },
    // lmbase64_en(params) {
    //   return CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(params))
    // },
    // //个人档案
    // personalarchives() {
    // },
    // //个人设置
    // personalsetting() {
    //   console.log("个人设置")
    // },
    // //退出登录
    // loginout() {
    //   this.$confirm({
    //     title: '询问?',
    //     content: '您确定要退出登录吗？?',
    //     okText: '确定',
    //     okType: 'danger',
    //     cancelText: '取消',
    //     maskClosable: true,
    //     onOk() {
    //       return new Promise((resolve, reject) => {
    //         myutils.request.post({
    //           url: "https://oa.limiaokeji.com/erp/login/loginout",
    //           data: {
    //             token: lmgettoken(),
    //             uid: lmbase64_en(lmgetuid()),
    //           },
    //           su: (su) => {
    //             if (su.code == 0) {
    //               window.open("login.html", "_self");
    //             }
    //           },
    //           ex: (ex) => {
    //
    //           }
    //         })
    //         console.log(reject)
    //       }).catch();
    //     }
    //   });
    // },
    // onTabEvent(targetKey, action) {
    //   this[action](targetKey);
    // },
    // //关闭tab页面
    // remove(targetKey) {
    //   let activeKey = this.activeKey;
    //   let lastIndex;
    //   this.panes.forEach((pane, i) => {
    //     if (pane.key === targetKey) {
    //       lastIndex = i - 1;
    //     }
    //   });
    //   const mpanes = this.panes.filter(pane => pane.key !== targetKey);
    //   if (mpanes.length && activeKey === targetKey) {
    //     if (lastIndex < 0)
    //       lastIndex = 0;
    //     activeKey = mpanes[lastIndex].key;
    //     location.hash = lmbase64_en(JSON.stringify(mpanes[lastIndex]));
    //   }
    //   this.panes = mpanes;
    //   this.activeKey = activeKey;
    // },
    // //打开tab页面
    // opentab(e) {
    //   if (e.key) {
    //     var ourl = lmbase64_de(e.key);
    //     console.log(ourl)
    //     const panes = this.panes;
    //     var hasitem = false;
    //     $.each(panes, (index, item) => {
    //       if (item.key == ourl) {
    //         this.activeKey = ourl;
    //         location.hash = lmbase64_en(JSON.stringify(item));
    //         hasitem = true;
    //         return false;
    //       }
    //     })
    //     if (!hasitem) {
    //       var mpane = {
    //         title: e.item.title,
    //         key: ourl
    //       };
    //       panes.push(mpane);
    //       this.panes = panes;
    //       location.hash = lmbase64_en(JSON.stringify(mpane));
    //       this.activeKey = ourl;
    //     }
    //   }
    // },
    // website() {
    //   window.open(this.website_url);
    // }
  }
}
</script>

<style scoped>

</style>
